const path = require('path');
const resolve = (dir) => path.resolve(__dirname, dir);
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugun = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin-webpack4');
const cssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader: 'px2rem-loader',
        options: {
            remUnit: 75,
            remPrecision: 8,
        },
    },
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    require('autoprefixer')({
                        overrideBrowserslist: [
                            'last 2 version',
                            '>1%',
                            'ios 7',
                        ],
                    }),
                ],
            },
        },
    },
];

module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index_[hash:8].js',
        chunkFilename: 'chunk/[name]_[hash:8].js',
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader',
            },

            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /.css$/,
                use: cssLoader,
            },
            {
                test: /.less$/,
                use: [...cssLoader, 'less-loader'],
            },
            {
                // 图片文件解析
                test: /.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: 'img/[name]_[contenthash:8].[ext]',
                            limit: 0,
                            esModule: false,
                        },
                    },
                ],
            },

            {
                // 字体文件解析
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(), // 每次build清除上一次构建目录
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            // 提取css文件
            filename: 'css/[name]_[contenthash:8].css',
            chunkFilename: 'css/[name]_[contenthash:8].css',
        }),
        new OptimizeCssAssetsPlugin({
            // css文件压缩
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
        }),
        new HtmlWebpackPlugun({
            template: path.join(__dirname, 'public/index.html'),
            filename: 'index.html',
            chunks: ['vendors', 'vue', 'index'],
            inject: true,
            minify: {
                html5: true,
                collapseWhitespace: true,
                preserveLineBreaks: true,
                minifyCSS: true,
                minifyJS: true,
                removeComments: true,
            },
        }),
    ],
    resolve: {
        extensions: ['.js', '.vue', '.css', '.less', 'html'],
        alias: {
            '@': resolve('src'),
            Images: resolve('assets', 'icon'),
        },
    },
};
